<template>
    <div class="hall">
      <div class="hall-type">
        <van-tabs v-model="active">
          <van-tab title="抢单">
             <div class="first order-list-wrapper">
               <div class="order-list">
                   <div class="list-headImg-wrapper">
                     <img src="@/assets/img/head.jpg" alt="" class="list-headImg">
                     <van-tag round type="primary" class="list-level">LV1</van-tag>
                   </div>
                   <div class="list-info">
                      <div class="info-type-grade">
                         <div class="info-type">文字&语音条 30分钟</div>
                         <van-tag round type="primary" class="info-grade icon iconfont icon-dengji-C">&nbsp;中级</van-tag>
                      </div>
                      <div class="info-nickname">昵称：叶子</div>
                     <div class="info-wait">已等待：20秒</div>
                     <div class="info-note">备注：JK白丝</div>
                   </div>
                   <div class="list-status">
                     <van-button type="default" class="first-status">抢单</van-button>
                   </div>
               </div>

               <div class="order-list">
                 <div class="list-headImg-wrapper">
                   <img src="@/assets/img/head.jpg" alt="" class="list-headImg">
                   <van-tag round type="primary" class="list-level">LV1</van-tag>
                 </div>
                 <div class="list-info">
                   <div class="info-type-grade">
                     <div class="info-type">文字&语音条 30分钟</div>
                     <van-tag round type="primary" class="info-grade icon iconfont icon-dengji-B">&nbsp;高级</van-tag>
                   </div>
                   <div class="info-nickname">昵称：叶子</div>
                   <div class="info-wait">已等待：20秒</div>
                   <div class="info-note">备注：JK白丝</div>
                 </div>
                 <div class="list-status">
                   <span class="first-status-text">已取消</span>
                 </div>
               </div>

               <div class="order-list">
                 <div class="list-headImg-wrapper">
                   <img src="@/assets/img/head.jpg" alt="" class="list-headImg">
                   <van-tag round type="primary" class="list-level">LV1</van-tag>
                 </div>
                 <div class="list-info">
                   <div class="info-type-grade">
                     <div class="info-type">文字&语音条 30分钟</div>
                     <van-tag round type="primary" class="info-grade icon iconfont icon-dengji-A">&nbsp;特级</van-tag>
                   </div>
                   <div class="info-nickname">昵称：叶子</div>
                   <div class="info-wait">已等待：20秒</div>
                   <div class="info-note">备注：JK白丝</div>
                 </div>
                 <div class="list-status">
                   <span class="first-status-text">已被抢走</span>
                 </div>
               </div>
             </div>
          </van-tab>
          <van-tab title="指定单">
            <div class="appoint order-list-wrapper">

              <div class="order-list" v-for="(item, index) in appointList" :key="item.appoint_id">
                <div class="list-headImg-wrapper">
                  <img src="@/assets/img/head.jpg" alt="" class="list-headImg">
                  <van-tag round type="primary" class="list-level">LV{{item.appoint_level}}</van-tag>
                </div>
                <div class="list-info">
                  <div class="info-type-grade">
                    <div class="info-type">{{item.appoint_type}}</div>

                    <van-tag v-if="item.appoint_grade=='特级'" round type="primary" class="info-grade icon iconfont icon-dengji-A"> &nbsp;{{item.appoint_grade}}</van-tag>
                    <van-tag v-else-if="item.appoint_grade=='高级'" round type="primary" class="info-grade icon iconfont icon-dengji-B"> &nbsp;{{item.appoint_grade}}</van-tag>
                    <van-tag v-else round type="primary" class="info-grade icon iconfont icon-dengji-C"> &nbsp;{{item.appoint_grade}}</van-tag>
                  </div>
                  <div class="info-nickname">昵称：{{item.appoint_nickname}}</div>
                  <div class="info-wait">已等待：{{item.wait_time}}</div>
                  <div class="info-note">备注：{{item.appoint_note}}</div>
                </div>
                <div class="list-status">
                  <van-button type="default" class="first-status"  @click="order(item)">接单</van-button>
                </div>
              </div>

            </div>
          </van-tab>
        </van-tabs>


      </div>
      <van-popup
        v-model="showOne"
        class="place-order"
        closeable
        close-icon="close"
      >
        <div class="show-wrapper">
          <div class="order-headline">接单</div>
          <div class="order-types">{{this.appoint_type}}</div>
          <div class="order-sure">确定要接单吗?</div>
          <div class="next">
            <button class="order-cancel" @click="orderCancel">取消</button> <button class="order-certainly" @click="nextOne">确定</button>
          </div>
        </div>
      </van-popup>

      <van-popup
        v-model="showCancel"
        class="place-order-cancel"
        closeable
        close-icon="close"
      >
        <div class="show-wrapper">
          <div class="order-headline">取消订单</div>
          <div class="order-types">{{this.appoint_type}}</div>
          <div class="order-sure">确定要取消订单吗?</div>
          <div class="next">
            <button class="finish-cancel" @click="finishCancel">确定</button>
          </div>
        </div>
      </van-popup>


      <van-popup
        v-model="showSuccess"
        class="place-order-success"
        closeable
        close-icon="close"
      >
        <div class="place-order-wrapper">
          <div class="pay-success">
            <div class="success-pic-wrapper">
              <img src="@/assets/img/success.png" alt="" class="success-pic">
            </div>
            <div class="success-text">接单成功</div>
            <div class="success-tip">
              您已成功接单，请查看订单详情，及时添加
              用户为好友并开始服务~
            </div>
            <div class="success-read">
              <router-link to="/clerkorderdetail" class="detail">查看详情</router-link>
            </div>
          </div>
        </div>
      </van-popup>

      <clerk-footer></clerk-footer>
    </div>
</template>

<script>
  import Vue from 'vue';
  import { Tab, Tabs, Tag, Button, Popup } from 'vant';
  Vue.use(Tab);
  Vue.use(Tabs);
  Vue.use(Tag);
  Vue.use(Button);
  Vue.use(Popup);
    import ClerkFooter from '@/components/ClerkFooter'
    export default {
        name: "Hall",
        components: {
          ClerkFooter
      },
      data() {
        return {
          active: 0,
          appointList:[
            {
              appoint_id:'001',
              appoint_headImg:'',
              appoint_level:'1',
              appoint_type:'语音 3小时',
              appoint_grade:'特级',
              appoint_nickname:'叶子',
              wait_time:'10秒',
              appoint_note:'JK白丝',
            },
            {
              appoint_id:'002',
              appoint_headImg:'',
              appoint_level:'10',
              appoint_type:'文字&语音条 30分钟',
              appoint_grade:'中级',
              appoint_nickname:'叶子',
              wait_time:'2小时',
              appoint_note:'JK白丝'
            },
            {
              appoint_id:'003',
              appoint_headImg:'',
              appoint_level:'3',
              appoint_type:'文字&语音条 60分钟',
              appoint_grade:'中级',
              appoint_nickname:'叶子',
              wait_time:'30分钟',
              appoint_note:'JK白丝'
            },
            {
              appoint_id:'004',
              appoint_headImg:'',
              appoint_level:'15',
              appoint_type:'文字&语音条 45分钟',
              appoint_grade:'中级',
              appoint_nickname:'叶子',
              wait_time:'1小时',
              appoint_note:'JK白丝'
            },
            {
              appoint_id:'005',
              appoint_headImg:'',
              appoint_level:'100',
              appoint_type:'语音 2小时',
              appoint_grade:'高级',
              appoint_nickname:'叶子',
              wait_time:'30秒',
              appoint_note:'JK白丝'
            },
          ],
          showOne: false,
          showSuccess: false,
          showTwo: false,
          showCancel: false
        };
      },
      methods: {
        order(item){
          console.log(item.appoint_type)
          this.appoint_type = item.appoint_type
          this.showOne = true;
        },
        orderCancel(){
          this.showOne = false;
          this.showCancel = true;
        },
        nextOne(){
          this.showOne = false;
          this.showSuccess = true;
        },
        finishCancel(){
          this.showCancel = false;
        }
      }
    }
</script>

<style scoped lang="stylus">
   @import '~style/mixins.styl'
   @import '~style/varibles.styl'
   .hall
     .hall-type
       .order-list-wrapper
         padding-top .2rem
         .order-list
           background-color #fff
           margin-bottom 1px
           padding .3rem
           between-align-items()
           .list-headImg-wrapper
             position relative
             width 1.4rem
             height 1.4rem
             .list-headImg
               width 100%
               height 100%
               border-radius .2rem
             .list-level
               position absolute
               bottom 0
               display inline-block
               text-align center
               font-size .1rem
               width .8rem
               border-radius .3rem
               background #000
               color: #fff
           .list-info
             width calc(100% - 3.4rem)
             padding 0 .25rem 0 .15rem
             .info-type-grade
               left()
               padding-bottom .2rem
               .info-type
                 font-size .26rem
                 color #333
               .info-grade
                 margin-left .15rem
                 font-size .16rem
                 background $DefaultColor
                 color $DefaultTextColor
                 height .2rem
             .info-nickname, .info-wait, .info-note
               font-size .2rem
               color #999
             .info-wait
               padding .1rem 0
           .list-status
             width 1.5rem
             height 1.4rem
             display flex
             align-items flex-end
             .first-status
               border-radius .3rem
               height .6rem
               background $DefaultWalletColor
               color $DefaultTextColor
               width 100%
             .first-status-text
               display inline-block
               font-size .26rem
               color #666
               width 100%
               text-align right
     .place-order
       width 6rem
       border-radius .2rem
       overflow:scroll
       overflow-y:hidden
       .show-wrapper
         padding .3rem
         .order-headline
           center()
           color #333
           padding .3rem 0 .7rem 0
           font-size .3rem
         .order-types
           center()
           color #333
           font-size .36rem
         .order-sure
           center()
           font-size .2rem
           color #666
           padding .5rem 0 .7rem 0
         .next
           between-align-items()
           padding .4rem 0 .1rem 0
           .order-cancel
             color #333
             font-size .3rem
             width 2rem
             background-color #fff
             center()
           .order-certainly
             font-size .3rem
             width 3.6rem
             border-radius .3rem
             color $DefaultTextColor
             height .8rem
             background-color #CED1EF
     .place-order-success
       width 6rem
       border-radius .2rem
       overflow:scroll
       overflow-y:hidden
       .pay-success
         .success-pic-wrapper
           padding-top .85rem
           center()
           .success-pic
             width 1.5rem
             height 1.5rem
         .success-text
           center()
           padding .3rem 0 .2rem 0
           color #333
           font-size .3rem
         .success-tip
           text-align center
           text-indent .3rem
           padding 0 .5rem
           font-size .2rem
           color #666
           line-height .3rem
         .success-read
           padding .3rem
           .detail
             display inline-block
             width 100%
             border-radius .1rem
             background-color #CED1EF
             color $DefaultTextColor
             height .7rem
             line-height .7rem
             text-align center
     .place-order-cancel
       width 6rem
       border-radius .2rem
       overflow:scroll
       overflow-y:hidden
       .show-wrapper
         padding .3rem
         .order-headline
           center()
           color #333
           padding .3rem 0 .7rem 0
           font-size .3rem
         .order-types
           center()
           color #333
           font-size .36rem
         .order-sure
           center()
           font-size .2rem
           color #666
           padding .5rem 0 .7rem 0
         .next
           between-align-items()
           padding .4rem 0 .1rem 0
           .finish-cancel
             font-size .3rem
             width 100%
             border-radius .3rem
             color $DefaultTextColor
             height .8rem
             background-color #CED1EF











</style>
<style>
  .hall .van-tabs__line{
    background-color: unset;
    background-color: transparent;
  }
  .hall .van-tab__text--ellipsis{
    font-size: .3rem;
  }
  .hall .van-tab--active{
    color: #8A8FC9;
  }
  .hall  .list-level{
    right: 0;
  }
</style>
